<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--
			
			请实现问题4.gif的效果
			注意:
			1.鼠标移上去火箭时会变化
			2.火箭与滚动条同时到顶(动画时间为1s),并且动画完成后,火箭会回到原位
			3.火箭升空时,有动画切换以求达到真实感觉
			4.请使用img/rocket_button_up.png进行火箭切换
		-->
		
		
		<!--
			1.如何获取滚动条的高度  scrollTop
			2.如何获取火箭的高度offsetTop
			3.火箭的动画的切换
			4.滚动条移动到最顶端
			5.火箭移动到最顶端
			6.同时到达最顶端
		-->
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.web {
				height: 10000px;
				background: linear-gradient(#fff, #000);
			}
			
			.rocket {
				width: 149px;
				height: 249px;
				background: url(../img/rocket_button_up.png) 0% 0%;
				position: fixed;
				top: 420px;
				right: 20px;
			}
			
			.rocket:hover {
				background-position: -100% 0;
			}
			
			.ani {
				animation: melon .1s infinite steps(4) alternate;
			}
			
			@keyframes melon {
				from {
					background-position: -200% 0;
				}
				to {
					background-position: -600% 0;
				}
			}
		</style>
		<div class="web">

		</div>
		<div class="rocket">

		</div>
		<script type="text/javascript">
			var rocket = document.querySelector(".rocket");
			rocket.addEventListener("click", function() {
				var body_top = document.body.scrollTop;
				var rocket_top = rocket.offsetTop;
				this.classList.add("ani");

				var body_speed = body_top / 50;
				var rocket_speed = rocket_top / 50;

				var time = setInterval(function() {
					body_top -= body_speed;
					document.body.scrollTop = body_top;
					rocket_top -= rocket_speed;
					rocket.style.top = rocket_top + "px";
					if(body_top <= 0) {
						clearInterval(time);
						rocket.classList.remove("ani");
						rocket.style = "";
						rocket.style.top = "420px";
					}
				}, 20)
			})
		</script>
	</body>

</html>